<template>
    <div>
        <div class="wrap">
            <div class="container">
                <div class="step">
                    <router-link to="/holdall"
                        ><span class="active">工具箱</span></router-link
                    >
                    &nbsp;&nbsp;<span>/</span>&nbsp;<router-link to="/name_grade"
                        ><span>姓名打分</span></router-link
                    >
                </div>
                <div class="top-box box" v-if="wuGe">
                    <el-row :gutter="30">
                        <el-col  :span="24" :sm="10" class="name-info">
                            <el-row class="item">
                                <el-col class="left" :span="4">
                                    姓名
                                </el-col>
								<el-col class="left" :span="5">
								    繁体
								</el-col>
								<el-col class="left" :span="5">
								    拼音
								</el-col>
								<el-col class="left" :span="5">
								    康熙笔画
								</el-col>
								<el-col class="left" :span="5">
								    字意五行
								</el-col>
                            </el-row>
                            <el-row class="item">
                                <el-col class="right" :span="4">
                                	<span v-for="(item, index) in hanZiList" :key="index">
                                		{{item.word}}&nbsp;
                                	</span>
                                </el-col>
                                <el-col class="right" :span="5">
                                    <span v-for="(item, index) in hanZiList" :key="index">
										{{item.traditional}}&nbsp;
									</span>
                                </el-col>
                               
                                <el-col class="right" :span="5">
                                    <span v-for="(item, index) in hanZiList" :key="index">
										{{item.pinyin}}&nbsp;
									</span>
                                </el-col>
                                
                                <el-col class="right" :span="5">
                                    <span v-for="(item, index) in hanZiList" :key="index">
										{{item.bihua}}&nbsp;
									</span>
                                </el-col>
                                
                                <el-col class="right" :span="5">
                                    <span v-for="(item, index) in hanZiList" :key="index">
										{{item.wuxing}}&nbsp;
									</span>
                                </el-col>
                            </el-row>
                        </el-col>
                        <el-col :xl="7" :lg="7"  :md="7" :sm="12" :xs="12" :span="12" class="name-info">
                            <el-row class="item">
                                <el-col class="left font-weight-normal" :xl="8" :lg="8" :md="8"  :sm="10" :xs="10">
                                    天格
                                </el-col>
                                <el-col class="right flex-row" :xl="16" :lg="16"  :md="16" :sm="14" :xs="10">
                                    <span style="margin-right: 25px;">>>{{wuGe.tian.num}}</span> ({{wuGe.tian.wuxing}})
                                </el-col>
                            </el-row>
                            <el-row class="item">
                                <el-col class="left font-weight-normal" :xl="8" :lg="8" :md="8"  :sm="10" :xs="10">
                                    地格
                                </el-col>
                                <el-col class="right flex-row" :xl="16" :lg="16"  :md="16" :sm="14" :xs="10">
                                    <span style="margin-right: 25px;">>>{{wuGe.di.num}}</span>({{wuGe.di.wuxing}})
                                </el-col>
                            </el-row>
                            <el-row class="item">
                                <el-col class="left font-weight-normal" :xl="8" :lg="8" :md="8"  :sm="10" :xs="10">
                                    人格
                                </el-col>
                                <el-col class="right flex-row" :xl="16" :lg="16"  :md="16" :sm="14" :xs="10">
                                    <span style="margin-right: 25px;">>>{{wuGe.ren.num}}</span> ({{wuGe.ren.wuxing}})
                                </el-col>
                            </el-row>
                        </el-col>
						<el-col :xl="7" :lg="7"  :md="7" :sm="12" :xs="12" :span="12" class="name-info">
							<el-row class="item">
							    <el-col class="left font-weight-normal" :xl="8" :lg="8" :md="8"  :sm="10" :xs="10">
							        外格
							    </el-col>
							    <el-col class="right flex-row" :xl="16" :lg="16"  :md="16" :sm="14" :xs="10">
							        <span style="margin-right: 25px;">>>{{wuGe.wai.num}}</span> ({{wuGe.wai.wuxing}})
							    </el-col>
							</el-row>
							<el-row class="item">
							    <el-col class="left font-weight-normal" :xl="8" :lg="8" :md="8"  :sm="10" :xs="10">
							        总格
							    </el-col>
							    <el-col class="right flex-row" :xl="16" :lg="16"  :md="16" :sm="14" :xs="10">
							        <span style="margin-right: 25px;">>>{{wuGe.zong.num}}</span> ({{wuGe.zong.wuxing}})
							    </el-col>
							</el-row>
						</el-col>
                    </el-row>
                </div>
				
				<div class="top-box box">
					<div class="title" style="margin-bottom: 20px;">
					    <span class="circle"></span>
					    总评及建议
					</div>
					<el-row class="item">
						<el-col :span="24" class="score-title">
							<span>姓名五格评分：</span> <span class="score">{{score}}分</span>
						</el-col>
					</el-row>
					<el-row class="item">
						<el-col :span="24" class="score-title">
							<span>{{desc}}</span>
						</el-col>
					</el-row>
					<el-row class="item">
						<el-col :span="24" class="score-title">
							<router-link class="a" to="/holdall">若想起名，查看起名大全>></router-link>
						</el-col>
					</el-row>
				</div>
				
                <div class="c-center-box box">
                    
                    <el-row class="item">
						<div class="title">
						    <span class="circle"></span>
						    天格{{wuGe.tian.num}}的解析
						</div>
                        <div class="tips">天格数是先祖留传下来的，其数理对人影响不大。</div>
						<div class="desc">
							{{wuGe.tian.desc}} <span class="tag">{{wuGe.tian.jx}}</span>
						</div>
						<div class="text">详细解释</div>
						<div class="content" v-html="wuGe.tian.content">
						</div>
                    </el-row>
					<el-row class="item">
						<div class="title">
						    <span class="circle"></span>
						    地格{{wuGe.di.num}}的解析
						</div>
                        <div class="tips">地格数是先祖留传下来的，其数理对人影响不大。</div>
						<div class="desc">
							{{wuGe.di.desc}} <span class="tag">{{wuGe.di.jx}}</span>
						</div>
						<div class="text">详细解释</div>
						<div class="content" v-html="wuGe.di.content">
						</div>
                    </el-row>
					<el-row class="item">
						<div class="title">
						    <span class="circle"></span>
						    人格{{wuGe.ren.num}}的解析
						</div>
                        <div class="tips">人格数是先祖留传下来的，其数理对人影响不大。</div>
						<div class="desc">
							{{wuGe.ren.desc}} <span class="tag">{{wuGe.ren.jx}}</span>
						</div>
						<div class="text">详细解释</div>
						<div class="content" v-html="wuGe.ren.content">
						</div>
                    </el-row>
					<el-row class="item">
						<div class="title">
						    <span class="circle"></span>
						    外格{{wuGe.wai.num}}的解析
						</div>
                        <div class="tips">外格数是先祖留传下来的，其数理对人影响不大。</div>
						<div class="desc">
							{{wuGe.wai.desc}} <span class="tag">{{wuGe.wai.jx}}</span>
						</div>
						<div class="text">详细解释</div>
						<div class="content" v-html="wuGe.wai.content">
						</div>
                    </el-row>
					<el-row class="item">
						<div class="title">
						    <span class="circle"></span>
						    总格{{wuGe.zong.num}}的解析
						</div>
                        <div class="tips">总格数是先祖留传下来的，其数理对人影响不大。</div>
						<div class="desc">
							{{wuGe.zong.desc}} <span class="tag">{{wuGe.zong.jx}}</span>
						</div>
						<div class="text">详细解释</div>
						<div class="content" v-html="wuGe.zong.content">
						</div>
                    </el-row>
                </div>
                <div class="c-bottom-box box">
					<div class="title">
                        <span class="circle"></span>
                        对三才数理的影响：
                    </div>
                    <el-row class="item">
						<div>您的姓名三才配置为：{{sanCai.title}}。它具有如下数理诱导力，据此会对人生产生一定的影响。</div>
						<div class="desc">
							{{sanCai.cgy}} <span class="tag">{{sanCai.jx}}</span>
						</div>
						<div class="text">详细解释</div>
						<div class="content" v-html="sanCai.content">
						</div>
                    </el-row>
                </div>
				
				<div class="c-bottom-box box">
					<el-row class="item m-0">
						<div class="box-title">对基础运的影响：<span class="box-desc">{{sanCai.jcy}}</span><span class="tag">{{sanCai.jx}}</span></div>
					</el-row>
					<el-row class="item m-0">
						<div class="box-title">对成功运的影响：<span class="box-desc">{{sanCai.cgy}}</span><span class="tag">{{sanCai.jx1}}</span></div>
					</el-row>
					<el-row class="item m-0">
						<div class="box-title">对人机关系的影响：<span class="box-desc">{{sanCai.rjgx}}</span><span class="tag">{{sanCai.jx2}}</span></div>
					</el-row>
					<el-row class="item m-0">
						<div class="box-title">对性格的影响：<span class="box-desc">{{sanCai.xg}}</span><span class="tag">{{sanCai.jx3}}</span></div>
					</el-row>
				</div>
				
				<div class="c-bottom-box box">
					<el-row class="item m-0">
						<div class="box-title"><div class="x-title">天格{{wuGe.tian.num}}有以下数理暗示： </div> <div class="box-desc" v-html="wuGe.tian.as"></div></div>
					</el-row>
					<el-row class="item m-0">
						<div class="box-title"><div class="x-title">地格{{wuGe.di.num}}有以下数理暗示：</div> <div class="box-desc" v-html="wuGe.di.as"></div></div>
					</el-row>
					<el-row class="item m-0">
						<div class="box-title"><div class="x-title">人格{{wuGe.ren.num}}有以下数理暗示：</div> <div class="box-desc" v-html="wuGe.ren.as"></div></div>
					</el-row>
					<el-row class="item m-0">
						<div class="box-title"><div class="x-title">外格{{wuGe.wai.num}}有以下数理暗示：</div> <div class="box-desc" v-html="wuGe.wai.as"></div></div>
					</el-row>
				</div>
            </div>
        </div>
    </div>
</template>

<script>
import banner from "@/assets/images/classicName/banner2.png"
export default {
    data() {
        return {
			wuGe: '', // 返回的五格
			sanCai: '', // 返回的三才字段
			hanZiList: '', // 返回的名字列表
			firstName: '', // 姓
			lastName: '', // 名
			desc:"",
			score: 0, // 姓名总评分
        }
    },
    created() {
		this.firstName = this.$route.query.firstName;
		this.lastName = this.$route.query.lastName;
		this.score = this.$route.query.score;
		console.log(this.$route.query)
        this.nameScore();
    },
    methods: {
        // 名字解析请求
        nameScore() {
			console.log(111111111111111)
            this.$ajax.get("/util/nameScore", {
                params: {
                    firstName: this.firstName,
                    lastName: this.lastName
                }
            }).then(res => {
				let ret = res.data;
				console.log(ret)
                if (ret.code == 0) {
					this.score=ret.data.score
					this.desc=ret.data.scoreInfo
                    this.wuGe = ret.data.wuGe;
					this.sanCai = ret.data.sanCai;
					this.hanZiList = ret.data.hanZiList;
                } else {
                    this.$message.error("数据获取失败!")
                }
            })
        }
    }
}
</script>
 
<style scoped>
	
	@media screen and (max-width:450px) {
		.name-info{
			border-right: 0!important;
			border-top: 1px solid #CCC!important;
		}
		.name-info:first-child{
			border-top: 0!important;
		}
	}
    .wrap {
        position: relative;
        background: url(../../assets/images/classicName/banner2.png) top no-repeat;
        font-size: 15px;
        background-color: rgb(241, 242, 249);
        padding-bottom: 1px;
    }

    .step {
        padding: 25px 0;
    }

    .step .active {
        color: #fff;
    }

    .step span {
        color: #ccc;
    }

    .box {
        background: #fff;
        padding: 30px;
        border-radius: 10px;
        margin-bottom: 30px;
    }

    .top-box .avatar-box {
        text-align: center;
        width: 90px;
        overflow: hidden;
        height: 90px;
    }

    .top-box .avatar-box img {
        width: 100%;
    }

    .top-box .item .left {
        color: rgb(131, 131, 131);
    }

    .top-box .item .right {
        color: rgb(61, 93, 234)!important;
    }

    .top-box .item-box .item {
        margin-top: 20px;
        display: flex;
        align-items: center;
    }

    .top-box .item-box .item:first-child {
        margin-top: 0px;
    }

    .top-box .item-box .item .persent {
        height: 6px;
        width: 100px;
        display: inline-block;
        vertical-align: center;
        border-radius: 3px;
        margin-left: 10px;
        background: linear-gradient(left, rgb(98, 146, 225), rgb(240, 240, 240));
    }

    .c-center-box .title,
    .top-box .title,
    .c-bottom-box .title {
        color: #000;
        font-size: 18px;
        display: flex;
        font-weight: 600;
        align-items: center;
		margin-left: -10px;
		margin-bottom: 20px;
    }

    .c-center-box .title .circle,
    .top-box .title .circle,
    .c-bottom-box .title .circle {
        display: inline-block;
        border-radius: 50%;
        border: 4px solid rgb(250, 97, 102);
        width: 18px;
        margin-right: 10px;
        height: 18px;
    }

    .c-center-box .item {
        margin-top: 20px;
        line-height: 1.5;
    }

    .c-center-box .item .left {
        color: rgb(131, 131, 131);
    }

    .c-center-box .item .right {
        color: rgb(46, 46, 46);
    }

    .name-box {
        display: flex;
        align-items: center;
        margin-top: 20px;
    }

    .name-box .name {
        width: 60px;
		flex: 0 0 60px;
        height: 60px;
        font-weight: bold;
        background: url(../../assets/images/nameAnalysis/tianzige.png) no-repeat;
        background-size: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 30px;
        margin-right: 15px;
    }

    .name-box .scoped.name {
		margin-top: 15px;
		width: 80px;
		height: 80px;
        overflow: hidden;
		margin-left: 50px;
		background: url(../../assets/images/nameAnalysis/score.png) no-repeat;
		background-size: 100%;
		font-size: 23px;
		color: #fff;
		line-height: 23px;
		display: flex;
		align-items: flex-start;
		padding-top: 13px;
    }
	.flex-row{
		flex-direction: row!important;
	}
    .top-box .tips .text {
        color: #888;
        margin-top: 20px;
    }

    .top-box .tips .text1 {
        margin-top: 15px;
        line-height: 20px;
    }
	.top-box .name-info{
		border-right: 1px solid #CCC;
		padding: 10px 0;
	}
	.top-box .name-info:last-child{
		border-right: 0;
	}
    .top-box .name-info .left {
        text-align: center;
        color: #424242;
		font-weight: bold;
    }
	.font-weight-normal{
		font-weight: normal!important;
		color: #838383!important;
		text-align: right!important;
		padding-right: 15px!important;
	}
    .top-box .name-info .right {
		text-align: center;
        color: #333;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: flex-start;
		
    }
	.top-box .name-info .right span{
		display: inline-flex;
		color: rgb(61, 93, 234);
	}
    .top-box .name-info .item {
        /* margin-top: 15px; */
		line-height: 30px;
		display: flex;
		flex-direction: row;
		align-items: center;
	}
	/* .c-center-box */
	 .item .tag {
		display: inline-block;
		background-color: rgb(250, 81, 86);
		color: #fff;
		padding: 4px 8px;
		line-height: 1;
		border-radius: 4px;
		margin-left: 10px;
	}
	.c-center-box .item{
		line-height: 1.8;
		color: #2e2e2e;
	}
	
	.c-bottom-box .item .text{
		margin-top: 30px;
		font-weight: bold;
		font-size: 16px;
		color: #424242;
	}
	
	.c-bottom-box .item .desc,
	.c-center-box .item .desc {
		font-size: 15px;
		color: #838383;
		line-height: 1.8;
		margin-top: 15px;
	}

	.c-center-box .item .text {
		font-size: 16px;
		color: #424242;
		font-weight: bold;
		margin-top: 10px;
	}

	.c-bottom-box .item .content,
	.c-center-box .item .content{
		color: #333;
		line-height: 2;
		margin-top: 10px;
	}

	.c-center-box .item {
		border-bottom: 1px solid rgb(220, 220, 220);
		padding-bottom: 30px;
		margin-bottom: 30px;
	}

	.c-center-box .item:last-child {
		margin-bottom: 0;
		border: none;
		padding-bottom: 0;
	}

	.c-bottom-box .item {
		margin-top: 30px;
		
	}

	.item .score-title{
		line-height: 30px;
		padding-left: 15px;
		font-size: 15px;
		color: #2e2e2e;
		display: flex;
		flex-direction: row;
		align-items: center;
	}
	.item .score-title .score{
		color: #ff5b5b;
		font-size: 24px;
		font-weight: bold;
	}
	
	.item .score-title .a{
		cursor: pointer;
		color: #4158d7;
	}
	
	.box-title{
		font-size: 15px;
		color: rgb(250, 81, 86);
		line-height: 1.8;
		font-weight: bold;
		display: flex;
		flex-direction: row;
		align-items: flex-start;
		margin-bottom: 5px;
	}
	.x-title{
		flex: 0 1 12em;
		width: 14em;
		height: 100%;
	}
	.box-title .box-desc{
		flex: 1;
		font-size: 15px;
		color: #838383;
		font-weight: normal;
	}
	.m-0{
		margin-top: 0!important;
	}

</style>